Escrow detail page #57
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
@shamoo53 please run npm run lint, and address the few lint errors. Thank you for this solid implementation |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Build Escrow Detail Page
Closes #13
🧩 Overview
This PR introduces a comprehensive Escrow Detail Page that gives users full visibility into an individual escrow agreement and serves as the central place for escrow-related actions.
The page improves transparency, trust, and usability by clearly displaying escrow terms, participant statuses, transaction history, and a real-time timeline of events — all in a responsive, user-friendly layout.
🚩 Problem Statement
Before this change:
❌ No dedicated view for individual escrow agreements
❌ Users could not see counterparty roles or confirmation status
❌ Escrow timelines and on-chain transaction history were hidden
❌ Actions like confirm, dispute, or release lacked proper context
This made it difficult for users to make informed decisions and reduced confidence in the escrow process.
🎯 Solution
A new Escrow Detail Page available at:
/escrow/[id]
This page provides a complete, structured view of an escrow agreement and dynamically adapts based on user role and escrow state.
🧱 Page Structure & Features
🧾 Header Section
Escrow title / identifier
Status badge (Pending, Funded, Released, Disputed, etc.)
Quick action buttons (role-aware)
👥 Parties Section
Escrow participants’ wallet addresses
Clearly defined roles (Initiator, Counterparty)
Confirmation status indicators per party
📜 Terms Section
Escrow amount (properly formatted)
Conditions / description
Deadline with real-time countdown timer
🕒 Timeline Section
Chronological display of escrow events:
Creation
Deposits
Confirmations
Disputes
Releases
🔗 Transaction History
List of on-chain transactions
Direct links to the Stellar Explorer
External links open in new tabs
⚡ Conditional Actions
Action buttons rendered dynamically based on:
Current user role
Escrow state
Includes:
✅ Confirm
🚀 Release
🔁 Additional UX Enhancements
📋 Share / copy escrow link (clipboard support)
📱 Fully mobile-responsive layout
🚫 404 handling for invalid or non-existent escrow IDs
⏳ Loading and error states
🛠️ Implementation Details
📁 New Page
src/app/escrow/[id]/page.tsx
🧩 Components
src/components/escrow/detail/
├── EscrowHeader.tsx
├── PartiesSection.tsx
├── TermsSection.tsx
├── TimelineSection.tsx
├── TransactionHistory.tsx
🔘 Action Components
ConfirmButton
DisputeButton
ReleaseButton
🔌 Hooks & Utilities
useEscrow.ts for data fetching
Deadline countdown component
Clipboard-based share utility
🧪 Testing & Validation
The following scenarios were tested and verified:
✅ Correct escrow loads by ID
🚫 Invalid escrow ID returns a 404 page
🔐 Action buttons show/hide based on role and state
🕒 Timeline renders events in correct chronological order
🔗 Transaction links open Stellar Explorer correctly
⏱ Countdown timer updates in real time
📋 Share button copies escrow URL to clipboard
📱 Responsive behavior on mobile screens
Closes #13